<template>
  <div class="registerBox">
    <el-form label-position="left" :model="tableForm" :rules="tableRule" ref="tableForm" label-width="0px" class="demo-ruleForm registerBox-inner">
      <h2 class="registerBox-title">注册账号</h2>

      <el-form-item label="" prop="account">
        <el-input size="small" v-model="tableForm.account" auto-complete="off" placeholder="请输入账号"></el-input>
      </el-form-item>

      <el-form-item label="" prop="name">
        <el-input size="small" v-model="tableForm.name" auto-complete="off" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="" prop="password">
        <el-input size="small" type="password" v-model="tableForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="" prop="sex">
        <el-radio-group v-model="tableForm.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="" prop="phone">
      <el-input size="small" v-model="tableForm.phone" auto-complete="off" placeholder="请输入手机号"></el-input>
      </el-form-item>

<!--      <el-form-item label="" prop="card">
        <el-input size="small" v-model="tableForm.card" auto-complete="off" placeholder="请输入身份证"></el-input>
      </el-form-item>-->

      <el-form-item label="" prop="address">
        <el-input size="small" v-model="tableForm.address" auto-complete="off" placeholder="请输入家庭住址"></el-input>
      </el-form-item>

      <el-form-item label="" prop="role">
        <el-radio-group v-model="tableForm.role">
          <el-radio label="管理员">管理员</el-radio>
          <el-radio label="居民">居民</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm" :loading="loading" >注册</el-button>
      </el-form-item>

      <el-form-item style="width:100%">
        <div style="float: right;">
          <el-link @click.native="login" type="primary" :underline="false">
            <span>[ 返回登录 ]</span>
          </el-link>
        </div>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>

import {addData} from '@/api/user'

export default {
  name: 'Register',
  data () {
    return {
      loading: false,
      tableForm: {
        id: '',
        account: '',
        name: '',
        password: '',
        phone: '',
        sex: '',
        card: '',
        address: '',
        medical: '',
        allergy: '',
        drug: '',
        role: ''
      },
      tableRule: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        role: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],

      },
      otherQuery: {}
    }
  },
  created () {
  },
  methods: {
    login() {
      this.$router.push({ path: '/login' });
    },
    submitForm () {
      this.$refs["tableForm"].validate(valid => {
        if (valid) {
          addData(this.tableForm).then(res => {
            if (res.message == "success" ) {
              this.$message({
                type: 'success',
                message: '注册成功，请重新登录！'
              });
              this.login()
            } else {
              this.$message({
                type: 'info',
                message: res.message
              });
            }
          });
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style>
.registerBox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 8%;
  background-image:url("../../assets/images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;

}

.registerBox-inner {
  border-radius: 10px;
  margin: 0px auto;
  width: 400px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.registerBox-title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-size: 22px;
}


</style>
